<!doctype html>
<html>

<head>
		<meta charset="utf-8">
		<title>爱计时赛事平台</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<link rel="stylesheet"  type="text/css" href="css/iconfont.css">
		<style type="text/css">
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}
		</style>
	</head>

	<body>
		<style>
					* {
					    touch-action: pan-y;
					}
					body{
						background-color: #FFFFFF;
					}
					.mui-control-content {
						background-color: white;
						min-height: 50rem;
					}
					.mui-control-content .mui-loading {
						margin-top: 3.125rem;
					}
					.mui-content .mui-table-view .mui-media-object{
						height: 6.25rem;
						max-width: 8.125rem;
					}
					.mui-bar-nav{
						position: absolute;
							background-color: #e94709;
							height: 9%;
		
					}
					.top-content{
						position: absolute;
						width: 100%;
						font-size:0.625rem;
						}
						.top-content img{
							width: 100%;					
							}
						.top-logo {
						position: absolute;
						    width: 10%;
							top: 0.625rem;			
								}
						.top-message{
							position: absolute;
							    width: 10%;
							    right: 0%;
								top: 0.3125rem;
						}
					.mui-input-row{
						overflow: unset;
						left: 10%;
					}
					
					.mui-search input[type=search] {
						      background-color: #f0774a;
						      width: 70%;
						      border-radius: 3.125rem;
						      height: 2.5625rem;
							  color: #ffffff;
					}
					.mui-active::before{
						color: #FFFFFF;
					}
					.mui-search .mui-placeholder{
						color: #595757;	
						line-height: 2.5rem;
						font-size: 0.5375rem;
						width: 45%;
						color: #FFFFFF;
						}	
					.search-icon{
						background-color: #fad6c8;
						    position: absolute;
						    top: 0.375rem;
						    right: 30%;
						    width: 15%;
						    text-align: center;
						    border: 0;
						    height: 2.5625rem;
						    color: #e94709;
						    border-radius: 1.25rem;
						    overflow: hidden;
					}	
					.mui-slider .mui-slider-group .mui-slider-item{
						    width: 105%;
						    padding-right: 1.25rem;
					}
					.mui-slider .mui-slider-group .mui-slider-item img{
						    width: 90%;
						    margin-top:4% ;
							margin-left: 5%;
						    border-radius: 1.25rem;
					}
					.mui-slider{
						margin-top:3rem ;
						z-index: 15;
						overflow: unset;
					}
					.mui-slider-indicator{
					bottom: -1.25rem;
					}
					.mui-slider-indicator .mui-active.mui-indicator{
						background: #ea4609;				
					}
					.mui-slider-indicator .mui-indicator{
						background: #ffcebd;
					}
					.mui-indicator .mui-active{
						background-color:#000000;
					}
					.mui-search .mui-placeholder{
						color: #FFFFFF;			
						}			
					.mui-search .mui-placeholder .mui-icon{
						color: #FFFFFF;
					    line-height: 1.875rem;
					}
					.top-choose{
						position: absolute;
						top: 10%;
						background: #efefef;
						}
						.mui-slider-indicator.mui-segmented-control .mui-control-item {
							border-left:1px solid #c1c1c1 ;
							padding: 0 22.5%;
							color: #585858;
						}
						.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
							color: #585858;
							border-bottom: 0;
						}
						.top-san{
						    border-width: 0.375rem 0.375rem 0;
						    border-style: solid;
						    margin-top: 0.9375rem;
						    margin-left: 0.3125rem;
							position: absolute;
							border-color: #333 transparent transparent;
						}
						.mui-bar-tab .mui-tab-item.mui-active{
							color: #ea4609;
						}
		.mui-bar-nav~.mui-content{
			margin-top: 14.5%;
			margin-bottom: 10%;
		}
		.mui-content .mui-table-view .mui-media-object{
			max-width: 40%;
		}
		.addtime{
			padding-top: 0.625rem;
			font-size: 0.625rem;
		}
		.mui-scroll-wrapper{
			top: 16%;
		}
		.event-status{
			font-size: 0.625rem;
			background-color: #2AC845;
			border-radius: 0.625rem;
			padding: 0.3125rem;
			color: #FFFFFF;
		}
		.bottom-remind{
			    width: 100%;
			    text-align: center;
			    padding-top: 10%;
				padding-bottom: 20%;
			    font-size: 15px;
			    color: #969696;
		}
		.mui-input-row .mui-input-clear~.mui-icon-clear{
			display: none;
		}
				</style>
		<header class="mui-bar mui-bar-nav">
			<div class="top-content">
				<div class="mui-input-row mui-search">
					<input type="search" class="mui-input-clear" placeholder="输入赛事/类型/城市/状态">
					<button  onclick="location.href='no.html';"  type="button" class="search-icon">搜索</a>
				</div>				
			</div>
			
		</header>
		<!-- 搜索页头部end -->
		<div class="top-choose">
			<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<a class="mui-control-item mui-active" id='showTime'>
						时间<span class="top-san"></span>
					</a>
					<a class="mui-control-item" id="showCityPicker">
					  城市<span class="top-san"></span>
					</a>
					<a class="mui-control-item" id="showType">
					类型<span class="top-san"></span>
					</a>
					<a class="mui-control-item" id="showStatus">
					   状态<span class="top-san"></span>
					</a>					
				</div>
			</div>
		</div>
	<div class="mui-content">
		<div id="scroll5" class="mui-scroll-wrapper">
		<div class="mui-scroll">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media">
				<a href="detail.html">
					<img class="mui-media-object mui-pull-left" src="images/banner.jpg">
					<div class="mui-media-body">
						<span class='event-status'>活动结束</span>
						<h4>幸福sdasdhasldhasd</h4>
						<p class='mui-ellipsis'>报名费用：100起</p>
						<p class=" mui-icon iconfont icon-riqi addtime">2020-01-01</p>
						<p class=" mui-icon iconfont icon-didian addtime">泰国清迈</p>
					</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media">
				<a href="detail.html">
					<img class="mui-media-object mui-pull-left" src="images/banner.jpg">
					<div class="mui-media-body">
						<span class='event-status'>活动结束</span>
						<h4>幸福sdasdhasldhasd</h4>
						<p class='mui-ellipsis'>报名费用：100起</p>
						<p class=" mui-icon iconfont icon-riqi addtime">2020-01-01</p>
						<p class=" mui-icon iconfont icon-didian addtime">泰国清迈</p>
					</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media">
				<a href="detail.html">
					<img class="mui-media-object mui-pull-left" src="images/banner.jpg">
					<div class="mui-media-body">
						<span class='event-status'>活动结束</span>				
						<h4>幸福sdasdhasldhasd</h4>
						<p class='mui-ellipsis'>报名费用：100起</p>
						<p class=" mui-icon iconfont icon-riqi addtime">2020-01-01</p>
						<p class=" mui-icon iconfont icon-didian addtime">泰国清迈</p>
					</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" src="images/banner.jpg">
					<div class="mui-media-body">
						<span class='event-status'>活动结束</span>				
						<h4>幸福sdasdhasldhasd</h4>
						<p class='mui-ellipsis'>报名费用：100起</p>
					<p class=" mui-icon iconfont icon-riqi addtime">2020-01-01</p>
					<p class=" mui-icon iconfont icon-didian addtime">泰国清迈</p>
					</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" src="images/banner.jpg">
					<div class="mui-media-body">
						<span class='event-status'>活动结束</span>				
						<h4>幸福sdasdhasldhasd</h4>
						<p class='mui-ellipsis'>报名费用：100起</p>
					<p class=" mui-icon iconfont icon-riqi addtime">2020-01-01</p>
					<p class=" mui-icon iconfont icon-didian addtime">泰国清迈</p>
					</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" src="images/banner.jpg">
					<div class="mui-media-body">
						<span class='event-status'>活动结束</span>				
						<h4>幸福sdasdhasldhasd</h4>
						<p class='mui-ellipsis'>报名费用：100起</p>
						<p class=" mui-icon iconfont icon-riqi addtime">2020-01-01</p>
						<p class=" mui-icon iconfont icon-didian addtime">泰国清迈</p>
					</div>
				</a>
			</li>
			
		</ul>
		<div class="bottom-remind">已显示全部内容</div>
	</div></div>	
	</div>
	<!-- 公共底部start -->
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item " href="index.html">
			<span class="mui-icon iconfont icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item mui-active" href="event.html">
			<span class="mui-icon iconfont icon-qizhi"></span>
			<span class="mui-tab-label">赛事</span>
		</a>
		<a class="mui-tab-item" href="grade.html">
			<span class="mui-icon iconfont icon-svg"></span>
			<span class="mui-tab-label">成绩</span>
		</a>
		<a class="mui-tab-item" href="my.html">
			<span class="mui-icon iconfont icon-copy"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
		<!-- 公共底部end -->
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.js"></script>
		<script src="js/mui.poppicker.js"></script>
		<script src="js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui('.mui-bar').on('tap','a',function(){
				document.location.href=this.href;
			})
			mui.init({
				swipeBack: false
			});
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
				
				var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if (this.checked) {
						sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
						//force repaint
						sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
					}
				});
			})(mui);
			(function($, doc) {
				$.init();
				$.ready(function() {
					/**
					 * 获取对象属性的值
					 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
					 * @param {Object} obj 对象
					 * @param {String} param 属性名
					 */
					var _getParam = function(obj, param) {
						return obj[param] || '';
					};
					//时间示例
					var timePicker = new $.PopPicker();
					timePicker.setData([{
						value: '2020',
						text: '2020年赛事'
					}, {
						value: '2019',
						text: '2019年赛事'
					}, {
						value: '2018',
						text: '2018年赛事'
					},]);
					var showTimeButton = doc.getElementById('showTime');
					showTimeButton.addEventListener('tap', function(event) {
						timePicker.show(function(items) {	
							console.log(items[0].value);
						});
					}, false);
					//类型示例
					var typePicker = new $.PopPicker();
					typePicker.setData([{
						value: '2020',
						text: '马拉松'
					}, {
						value: '2019',
						text: '自由跑'
					}, {
						value: '2018',
						text: '徒步'
					},]);
					var showTypeButton = doc.getElementById('showType');
					showTypeButton.addEventListener('tap', function(event) {
						typePicker.show(function(items) {	
							console.log(items[0].value);
						});
					}, false);
					//状态示例
					var statusPicker = new $.PopPicker();
					statusPicker.setData([{
						value: '2020',
						text: '活动结束'
					}, {
						value: '2019',
						text: '活动进行中'
					}, {
						value: '2018',
						text: '活动报名中'
					},]);
					var showStatusButton = doc.getElementById('showStatus');
					showStatusButton.addEventListener('tap', function(event) {
						statusPicker.show(function(items) {	
							console.log(items[0].value);
						});
					}, false);
					//-----------------------------------------
					//级联示例
					var cityPicker = new $.PopPicker({
						layer: 2
					});
					cityPicker.setData(cityData);
					var showCityPickerButton = doc.getElementById('showCityPicker');
					var cityResult = doc.getElementById('cityResult');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker.show(function(items) {
							// cityResult.innerText = "你选择的城市是:" + items[0].text + " " + items[1].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
							console.log(items);
							console.log(items[0].value+items[1].value);
						});
					}, false);
				});
			})(mui, document);
		</script>
	
	</body>
	
</html>
